<template>
  <div class="myDiv">
<el-row :gutter="20">
  <el-col :span="6">
    <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />所属部门
                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
  </el-col>
  <el-col :span="10">
    <el-card class="box-card">
      <el-calendar v-model="attendanceData.date" style="height: 500px;">
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <span>{{ date.getDate() }}</span>
              <!-- 使用v-if避免在没有数据的时候显示解析-->
              <el-tag v-show="data.type==='current-month'" v-if="attendanceData.list[date.getDate() - 1]"
                      :type="attendanceData.list[date.getDate() - 1].tagType">
                {{ attendanceData.list[date.getDate() - 1].message }}
              </el-tag>
            </template>
          </el-calendar>
        </el-card>
  </el-col>
  <el-col  :span="8" style="height: 600px;">
   
 <NoticeMenhu ></NoticeMenhu>

  </el-col>
</el-row>
    




  </div>
</template>

<script>
import NoticeMenhu from '@/views/system/notice/noticemenhu';
import Piechartfrom from '@/views/menhu/Piechart';
import userAvatar from "@/views/system/user/profile/userAvatar";
import userInfo from "@/views/system/user/profile/userInfo";
import { getAttendanceData } from "@/api/hrmanagement/menhu";
import { mapState } from 'vuex'
import store from "@/store";
import { getUserProfile } from "@/api/system/user";
export default {
  name: '',
 
  components:{
    NoticeMenhu,Piechartfrom,userAvatar, userInfo 
},
computed: {
  currentDateInfo () {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const currentDate = date.getDate()
      const day = date.getDay()
      return year + '年' + month + '月' + currentDate + '日' + ' ' + this.dayOfWeek[day]
    },
  },
  data(){
    return {
      attendanceData: {
        date: '',
        list: []
      },
      value: new Date(),
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo"
   
    }
  },
  watch:{
},
  computed:{
},

  methods:{

    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      })
      
    
    }
},

 created () {
  
 

  
  this.getUser()
  getAttendanceData({ id: store.getters.userId }).then(response => {
        if (response.code === 200) {
          this.attendanceData.list = response.data
        } else {
          this.$message.error('获取数据失败！')
        }
      })
  
 }
}
</script>
<style lang="scss" scoped>
.myDiv{
margin-top: 12px;
  width: 100%;
  height: 250px;

}
</style>